<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="../Source/Form/theme/classic/formcheck.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="form.css" type="text/css" media="screen" />
		<style type="text/css">
			.fc-field-error {
				border : 1px solid red;
			}
		</style>
		<script type="text/javascript" src="mootools-1.2-core-nc.js"></script>
		<script type="text/javascript" src="mootools-1.2-more.js"></script>
		<script type="text/javascript" src="../Source/Form/lang/en.js"></script>
		<script type="text/javascript" src="../Source/Form/formcheck.js"></script>
		<script type="text/javascript">
			window.addEvent('domready', function(){
				form = new FormCheck('formular', {
					display : {
						indicateErrors 	: 1,
						titlesInsteadNames : 1,
						errorsLocation	: 1,
						showErrors		: 1,
						closeTipsButton	: 1,
						addClassErrorToField : 1,
						tipsPosition : 'right',
						fadeDuration : 300
					}
				});
			});
		</script>
		<title>FormCheck 1.4</title>
	</head>
	<body>
		<form class="formular" action="#" method="get" id="formular">
			<h2>Simple registration</h2>
			<fieldset>
				<legend>Sex</legend>
				<label>
					<span>M.</span>
					<input type="radio" name="sex" class="validate['required']" value="m"></input>
				</label>
				<label>
					<span>Ms.</span>
					<input type="radio" name="sex" value="f"></input>
				</label>
				<label>
					<span>A value</span>
					<select class="validate['required']">
						<option>Please choose</option>
						<option selected='selected'>Value 12</option>
						<option>Value 42</option>
					</select>
				</label>
			</fieldset>
			
			<fieldset>
				<legend>User informations</legend>
				<label>
					<span>Desired username : </span>
					<input type="text" name="user" class="validate['required','length[4,16]'] text-input"></input>
				</label>
				<label>
					<span>First name : </span>
					<input type="text" name="firstname" class="validate['required','length[3,-1]','nodigit'] text-input"></input>
				</label>
				<label>
					<span>Last name : </span>
					<input type="text" name="lasttname" class="validate['required','length[3,-1]','nodigit'] text-input"></input>
				</label>
			</fieldset>
			
			<fieldset>
				<legend>Password</legend>
				<label>
					<span>Password : </span>
					<input type="password" title="the password field" name="passWord1" class="validate['required','length[6,-1]','digit'] text-input"></input>
				</label>
				<label>
					<span>Confirm password : </span>
					<input type="password" name="password2" class="validate['confirm[passWord1]'] text-input"></input>
				</label>
			</fieldset>
			
			<fieldset>
				<legend>Email</legend>
				<label>
					<span>Email address : </span>
					<input type="text" name="email" title="email address" class="validate['email'] text-input"></input>
				</label>
				<label>
					<span>Confirm email address : </span>
					<input type="text" name="email2" class="validate['confirm[email]'] text-input"></input>
				</label>
			</fieldset>
			
			<fieldset>
				<legend>Conditions</legend>
				<div class="infos">Checking this box indicates that you accept terms of use. If you do not accept these terms, do not use this website : </div>
				<label>
					<span class="checkbox">I accept terms of use : </span>
					<input type="checkbox" name="agree" class="validate['required'] checkbox"></input>
				</label>
			</fieldset>
			<input type="submit" name="submit" value="Validate & Send the form!" />
			<hr />
		</form>
	</body>
</html>
